<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="11">
        <!--公司优势选择器-->
        <el-card style="height: 100%;;margin-bottom: 20px;">
          <el-divider><i class="el-icon-mobile-phone"></i>公司优势添加</el-divider>
          <el-transfer
            :props="{key: 'id',label: 'name'}"
            v-model="advantageIds"
            :data="advantageList"
            :button-texts="['移除', '添加']"
            :titles="['公司福利选择器', '已选公司福利']">
          </el-transfer>
          <el-row style="margin-top: 10px; text-align: right">
            <el-button type="primary" @click="setCompanyAdvantage()">提交</el-button>
          </el-row>
        </el-card>
        <!--公司福利选择器-->
        <!--职位信息集合展示-->
        <el-card style="height: 100%;;margin-bottom: 20px;">
          <!--职位信息展示数据-->
          <div class="block">
            <el-divider><i class="el-icon-mobile-phone"></i>职位信息</el-divider>
            <el-timeline>
              <el-timeline-item v-for="item in companyPostList" :key="item.id" :timestamp="item.created" placement="top">
                <h4 style="color: red">【岗位】:{{item.name}}</h4>
                <el-button @click="findPostInfoById(item.id)"  size="mini" icon="el-icon-check" type="success" round>查看岗位详情</el-button>
              </el-timeline-item>
            </el-timeline>
          </div>
          <!--职位信息展示数据-->
          <!--分页组件-->
          <el-pagination
            :current-page="pagination.currentPage"
            :page-size="pagination.pageSize"
            :total="pagination.total"
            :page-sizes="[2, 5, 8]"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
            layout="total,sizes, prev, pager, next, jumper">
          </el-pagination>
          <!--分页组件-->
        </el-card>
        <!--职位信息集合展示-->
      </el-col>
      <!--公司信息-->
      <el-col :span="13">
        <el-card style="height: 100%;;margin-bottom: 20px;">
          <el-divider><i class="el-icon-mobile-phone"></i>公司详情</el-divider>
          <el-descriptions class="margin-top" :column="3" >
            <template slot="extra">
              <el-button type="warning" icon="el-icon-view" @click="handleUpdateDialog"  size="mini" slot="reference">修改公司信息</el-button>
            </template>
            <el-descriptions-item label="公司名" :span="4">{{companyInfo.name}}</el-descriptions-item>
            <el-descriptions-item  label="邮箱">
              <el-tag size="small">{{companyInfo.email}}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="网站"><el-tag size="success">{{companyInfo.url}}</el-tag></el-descriptions-item>
            <el-descriptions-item label="规模"><el-tag size="success">{{companyInfo.size}}</el-tag></el-descriptions-item>
            <el-descriptions-item label="类型"><el-tag size="success">{{companyInfo.type}}</el-tag></el-descriptions-item>
            <el-descriptions-item label="账号"><el-tag type="warning" size="small">{{companyInfo.account}}</el-tag></el-descriptions-item>
            <el-descriptions-item label="联系人"><el-tag type="warning" size="small">{{companyInfo.contact}}</el-tag></el-descriptions-item>
            <el-descriptions-item label="联系电话"><el-tag type="warning" size="small">{{companyInfo.telephone}}</el-tag></el-descriptions-item>
            <el-descriptions-item label="注册资金"><el-tag type="warning"size="small">{{companyInfo.registerMoney}}</el-tag></el-descriptions-item>
            <el-descriptions-item label="联系地址" :span="4"><el-tag type="danger" size="small">{{companyInfo.addr}}</el-tag></el-descriptions-item>
          </el-descriptions>
          <el-card  class="box-card"  shadow="hover">
            <el-divider content-position="right"><span style="font-weight: bolder;color: red;"><i class="el-icon-office-building"></i>公司描述</span></el-divider>
            {{companyInfo.description}}
          </el-card>
          <el-card  class="box-card"  shadow="hover">
            <el-divider content-position="right"><span style="font-weight: bolder;color: red;"><i class="el-icon-office-building"></i>公司优势</span></el-divider>
            <el-tag
              v-for="tag in advantageTags"
              :key="tag.name">
              {{tag.name}}
            </el-tag>
          </el-card>
        </el-card>
      </el-col>
      <!--公司信息-->
    </el-row>
    <!--岗位信息详情框-->
    <el-dialog
      title="提示"
      :visible.sync="dialogFormVisible"
      width="600px"
      :before-close="handleAddFormClose">
      <el-descriptions title="岗位信息详情" direction="vertical" :column="4" border>
        <el-descriptions-item label="职位名称">{{post.name}}</el-descriptions-item>
        <el-descriptions-item label="受教育程度">{{post.education}}</el-descriptions-item>
        <el-descriptions-item label="工作经验">{{post.experience}}</el-descriptions-item>
        <el-descriptions-item label="工资">
          <el-tag size="small">{{post.salary}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="岗位描述" :span="4">{{post.description}}</el-descriptions-item>
        <el-descriptions-item label="招聘人数">{{post.count}}</el-descriptions-item>
        <el-descriptions-item label="工作地">{{post.address}}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
    <!--岗位信息详情框-->
    <!--修改企业对话框-->
    <el-dialog
      :close-on-click-modal="false"
      title="修改企业对话框"
      :visible.sync="dialogFormVisible4Edit"
      width="600px"
      :before-close="handleEditFormClose">
      <el-form :model="formData" :rules="rule" ref="dataEditForm">
        <el-form-item label="公司电话"  prop="telephone" label-width="100px">
          <el-input v-model="formData.telephone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="公司邮件"  prop="email" label-width="100px">
          <el-input v-model="formData.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="公司地址"  prop="addr" label-width="100px">
          <el-input v-model="formData.addr" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="公司网址"  prop="url" label-width="100px">
          <el-input v-model="formData.url" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="公司类型"  prop="type" label-width="100px">
          <el-select v-model="formData.type" placeholder="请选择规模人数">
            <el-option v-for ="(item,index) in companyTypeList" :key="item.id" :label="item.dictKey" :value="item.dictVal"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="公司规模"  prop="size" label-width="100px">
          <el-select v-model="formData.size" placeholder="请选择公司规模">
            <el-option v-for ="(item,index) in companySizeList" :key="item.id" :label="item.dictKey" :value="item.dictVal"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="公司logo"  prop="logo" label-width="100px">
          <el-input v-model="formData.logo" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="公司简述" prop="description" label-width="100px">
          <el-input type="textarea" v-model="formData.description"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleEditFormClose()">取 消</el-button>
        <el-button type="primary" @click="handleEdit('dataEditForm')">确 定</el-button>
      </div>
    </el-dialog>
    <!--修改企业对话框-->
  </div>
</template>
<script>
import {getCompanyInfo,updateCompanyInfo} from '@/api/company';
import {findById,findCompanyPost} from '@/api/post';
import {findDictListByTypeId} from '@/api/dict';
import {findCompanyAdvantage,findAll,save} from '@/api/advantage';
export default {
  name: "index",
  data() {
    return {
      advantageList: [],//公司优势集合
      advantageIds: [],//当前公司拥有标签Id集合
      advantageTags:[],//当前公司拥有标签集合
      pagination: {
        currentPage: 1,
        pageSize: 5,
        total: 0,
        queryParams: {}
      }, //分页数据模型数
      companyInfo: {},//公司信息详情
      companyPostList: [], //公司职位集合
      dialogFormVisible: false,//岗位详情对话框
      post: {},//岗位模型
      formData: {},//表单数据
      companySizeList:[],//公司规模人数
      companyTypeList:[],//公司类型
      dialogFormVisible4Edit:false,//编辑表单是否可见
      rule: {
        name: [{required: true, message: '请输入公司名称', trigger: 'blur'}],
        telephone: [{required: true, message: '请输入公司联系电话', trigger: 'blur'}],
        email: [{required: true, message: '请输入公司邮箱', trigger: 'blur'}],
        addr: [{required: true, message: '请输入公司地址', trigger: 'blur'}],
        size: [{required: true, message: '请输入公司规模', trigger: 'blur'}],
        type: [{required: true, message: '请输入公司类型', trigger: 'blur'}],
        description: [{required: true, message: '请输入公司简述', trigger: 'blur'}],

      },//表单的校验规则
    }
  },
  created() {
    this.getCompanyInfo()
    this.getCompanyPostList()
    this.findCompanyTypeList()
    this.findAllAdvantage()
    this.findCompanyAdvantage()
    this.findPostCountList()
  },
  methods: {
    //查询公司规模人数字典集合
    findPostCountList(){
      console.log("===系统正在查询公司规模人数字典集合===")
      findDictListByTypeId(5).then(res=>{ this.companySizeList = res.data})
      console.log("===系统查询公司规模人数字典集合成功！===")
    },
    //查询公司类型字典集合
    findCompanyTypeList(){
      console.log("===系统正在查询公司类型字典集合===")
      findDictListByTypeId(4).then(res=>{ this.companyTypeList = res.data});
      console.log("===系统查询公司类型字典集合成功！！===")
    },
    //关闭岗位信息详情框窗口的方法
    handleAddFormClose() {
      this.dialogFormVisible = false
    },
    //获取公司信息
    getCompanyInfo() {
      console.log("===系统正在获取公司信息===")
      getCompanyInfo().then(res=>{this.companyInfo = res.data})
      console.log("===系统正在获取公司信息成功！！===")
    },
    //获取公司职位信息
    getCompanyPostList() {
      console.log("===系统正在获取公司职位信息===")
      findCompanyPost(this.pagination).then(res=>{
        this.companyPostList = res.data.rows;
        this.pagination.total = res.data.total;
      })
      console.log("===系统获取公司职位信息成功！！===")

    },
    // 获取该公司优势
    findCompanyAdvantage() {
      console.log("====系统正在获取公司优势=====")
      findCompanyAdvantage().then(res=>{
        this.advantageIds = res.data.advantageIds
        this.advantageTags = res.data.advantageTags
      })
      console.log("====系统成功获取公司优势！=====")
    },
    //查看全部的公司优势
    findAllAdvantage() {
      console.log("===系统正在获取全部的公司优势===")
      findAll().then(res=>{
        this.advantageList = res.data;
      })
      console.log("===系获取全部的公司优势成功！===")
    },
    //设置公司优点
    setCompanyAdvantage() {
      save(this.advantageIds).then(res=>{
        this.$message({
          showClose: true,
          message: '恭喜你，操作成功',
          type: 'success',
          onClose: () => {
            this.findCompanyAdvantage()
          }
        });
      })
    },
    //改变每页显示的条数
    handleSizeChange(pageSize) {
      this.pagination.pageSize = pageSize
      this.getCompanyPostList()
    },
    //切换页码
    handleCurrentChange(currentPage) {
      this.pagination.currentPage = currentPage;
      this.getCompanyPostList()
    },
    //根据职位ID查询职位信息
    findPostInfoById(id) {
      this.dialogFormVisible = true
        findById(id).then(res => {
          this.post = res.data;
        })
    },
    //弹出编辑窗口的方法
    handleUpdateDialog() {
      this.resetForm()
      this.dialogFormVisible4Edit = true
      this.formData =  JSON.parse(JSON.stringify(this.companyInfo))
    },
    //处理修改的方法
    handleEdit(formName) {
      console.info("==系统正在修改企业信息==")
      this.$refs[formName].validate((valid) => {
        if (valid) {
          updateCompanyInfo(this.formData).then(res=>{
              //弹出成功框，显示成功信息
              this.$message({
                showClose: true,
                message: '恭喜你，操作成功',
                type: 'success',
                onClose: () => {
                  this.getCompanyInfo()
                }
              });
           })
            this.dialogFormVisible4Edit = false;
            this.getCompanyInfo()
            console.info("【====系统成功修改企业信息===】")
        }
      });
    },
    //重置表单的方法
    resetForm() {
      this.formData = {}
    },
    //关闭修改表单窗口的方法
    handleEditFormClose(){
      //关闭修改表单对话框
      this.dialogFormVisible4Edit = false
      //设置表单数据模型为空
      this.resetForm();
    },

  }
}
</script>
<style scoped>
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>
